<template>
  <!--音乐播放器-->
  <div class="play-box">
    <h4 class="title">你不是真正的快乐</h4>
    <div class="btn-box">
      <div class="btn prev-btn"></div>
      <div class="btn play-btn"></div>
      <audio id="audio"></audio>
      <div class="btn next-btn"></div>
    </div>
    <!--列表-->
    <div class="play-list">
      <ul>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
        <li>
          <span class="eq">1</span>
          <span class="list-title">你不是真正的快乐</span>
          <span class="author">五月天</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
  /*播放器*/
  .play-box{
    margin-top:30PX;
  }
  .play-box,
  .btn-box{
    width:100%;
    display:table;
    content:'';
    text-align:center;
    font-size:0;
  }
  /*按钮*/
  .btn-box{
    margin:18px 0;
  }
  .btn-box .btn{
    width:30px;
    height:30px;
    border-radius:50%;
    text-align:center;
    color:#fff;
    display:inline-block;
    overflow:hidden;
    margin:0 15px;
    cursor:pointer;
    background:url("/resources/webSite/images/play-btn.png") no-repeat;
  }
  /*标题*/
  .play-box .title{
    font-size:14px;
    color:#FFF;
    line-height:14px;
    text-align:center;
    font-weight:normal;
  }
  /*prev*/
  .btn-box .prev-btn{
    background-position:0 -90px;
  }
  .btn-box .prev-btn:hover{
    background-position:-30px -90px;
  }
  /*play*/
  .btn-box .suspend-btn{
    background-position:0 -30px;
  }
  .btn-box .suspend-btn:hover{
    background-position:-30px -30px;
  }
  /*suspend*/
  .btn-box .play-btn{
    background-position:0 0;
  }
  .btn-box .play-btn:hover{
    background-position:-30px 0;
  }
  /*next*/
  .btn-box .next-btn{
    background-position:0px -60px;
  }
  .btn-box .next-btn:hover{
    background-position:-30px -60px;
  }
  /*列表*/
  .play-box .play-list{
    height:217px;
    width:100%;
    overflow:hidden;;
    border-top:1px solid #ddd;
  }
  .play-box .play-list li{
    padding:4px 0;
    overflow:hidden;
    display:table;
    content:'';
    font-size:0;
    cursor:pointer;
    border-bottom:1px solid #ddd;
    color:#fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    transition: color 0.3s;
  }
  .play-box .play-list li:hover{
    color:#3298D6;
  }
  .play-box .play-list span{
    height:22px;
    line-height:22px;
    display:inline-block;
    font-size:12px;
    text-align:left;
  }
  .play-box .play-list .eq{
    width:25px;
    padding-left:5px;
  }
  .play-box .play-list .list-title{
    width:165px;
    text-align:left;
  }
  .play-box .play-list .author{
    width:45px;
    margin-right:5px;
    text-align:right;
  }
</style>
